文字段落樣式

文字間距

文本間距分為兩種，字元間距和單字間距。

• 字元間距：調整每個字元間的距離
• 單字間距：調整每個單字間的距離，以是否空格區別單字，所以中文無作用

• 屬性名：letter-spacing (字元間距)、word-spacing (單字間距)
• 屬性值：normal、inherit、確切距離 (ex: 10px)
• 間距值可以為負，最後文字會疊在一起

範例：

.p2 {
    letter-spacing: 10px; /* 針對每個字元的間距 */
}
.p3 {
    word-spacing: 20px; /* 以空格分辨單字，並調整間距大小 */
}

<p class="p1">哈囉你好. Hello how are you.</p>
<p class="p2">哈囉你好. Hello how are you.</p>
<p class="p3">哈囉你好. Hello how are you.</p>

段落縮排

• 屬性名：text-indent
• 屬性值：絕對值 (px, cm 等)、百分比 ( % )，預設為每段首行縮排，後面若有需要可加作用範圍 (每行)。
• 縮排最長使用的單位是 em

範例：

p {
	text-indent: 40px; /* 絕對數值 */
	text-indent: 15%; /* 百分比 */
	text-indent: 5em each-line; /* 縮排作用於每一行 */
}

文字修飾

• 屬性名：text-decoration
• 屬性值：像 font 一樣是組合屬性，必要屬性為底線類型，前面可自由加入底線樣式及顏色
• 底線類型分為：underline (底線)、line-through (刪除線)、overline (上底線)、none (無底線)

範例：

p {
	text-decoration: underline; /* 預設底線 */
	text-decoration: underline dotted; /* 底線 + 底線樣式(點點) */
	text-decoration: green wavy underline; /* 底線樣式 + 顏色 */
}

段落行高

• 屬性名：line-height
• 屬性值：數字、百分比等。
• 同時設定 font 的行高和 line-height 時可能會出現覆蓋問題
• line-height 經常用於調整多行文字的行距，及設定單行文字的垂直置中

範例：

p {
	line-height: normal;
	line-height: 3.5; /* 無單位數字，乘以該元素的字體大小為行高 */
	line-height: 3em;
	line-height: 34%; /* 參考該元素字體大小的百分比 */
}

文字對齊

水平對齊

• 屬性名：text-align
• 屬性值：start、end、left、right、center 等。
• 作用元素：純文字、<span>、<a>、<input>、<img>，且需要在這些元素的父元素中設定 text-align ( 例如要讓 <p> 內的文字置中需要在 p 設定 text-align，而非直接控制文字 )

範例：

p {
	text-align: left;
	text-align: right;
	text-align: center; /* 行內文字置中 */
	text-align: justify; /* 文字向兩側對齊，對最後一行無效 */
	text-align: justify-all; /* 與 justify 相同，但強制最後一行也向兩側對齊 */
	text-align: start; /* 向文字開頭對齊 */
}

垂直對齊

line-heigt
在只有單行文字時，將行高設為與父元素高度相同可以達到垂直置中的效果。

範例：

div {
    height: 200px;
    background-color: skyblue;
}
p {
    line-height: 200px;
}

<div>
    <p>我要置中</p>
</div>

vertical-align
與 line-height 不同，vertical-align 主要用來指定同一行元素間或表格內的文字對齊方式，通常用於 文字+圖片 或者文字大小不同時。

• 屬性名：vertical-align
• 屬性值：baseline (預設)、top、middle、bottom、text-bottom、百分比等

範例：

div {
    height: 200px;
    background-color: skyblue;
    font-size: 40px;
}
span {
    font-size: 20px;
    color: red;
}

將紅色字調小，預設會以基線對齊，如下圖

若要調整的話可在紅色字元素上加 vertical-align 並指定對齊方式

span {
    font-size: 20px;
    color: red;
    vertical-align: top;
}

上一篇：[快速入門前端 21] CSS 常見屬性(1) 字體樣式和顏色
下一篇：[快速入門前端 23] CSS 常見屬性(3) 邊框、表格及列表屬性
系列文章列表：[快速入門前端] 系列文章索引列表